<template>
    <view class="time-page">
		<view class="header-block">
			<view class="account-address">
				<text class="name text-ellipsis-1">账户地址：{{account.address?account.address:''}}</text>
				<view class="btn-copy" @click="copy(account.address)">复制</view>
			</view>
			<view class="flex-around">
				<view @click="goCFPManage()" class="tab-manage">
					<image src="../static/img/cfp-manage.png"></image>
					<view class="tab">{{tokenName}}管理</view>
				</view>
				<view @click="goFinancialList()" class="tab-manage">
					<image src="../static/img/cfp-detail.png"></image>
					<view class="tab">{{tokenName}}收支</view>
				</view>
				<view @click="goTimeList()" class="tab-manage">
					<image src="../static/img/time-manage.png"></image>
					<view class="tab">TIME收支</view>
				</view>
				<view @click="goTimeTransfer()" class="tab-manage">
					<image src="../static/img/property-manage.png"></image>
					<view class="tab">资产管理</view>
				</view>
				<view @click="goTimeManage()" class="tab-manage">
					<image src="../static/img/time-change.png"></image>
					<view class="tab">TIME兑换</view>
				</view>
			</view>
		</view>
		
		<view class="my-property">
			<view class="title">我的资产</view>
			<view class="flex-between item">
				<view class="header">
					<image src="../static/img/asset-cfp.png"></image>
					<view>123</view>
				</view>
				<view class="header">
					<image src="../static/img/asset-time.png"></image>
					<view>123</view>
				</view>
				<!-- <view class="value">{{account.time_money}}</view> -->
			</view>
			<!-- <view class="flex-between item mt-10">
				<view class="header">
					<image src="../static/img/time-icon.png"></image>
					TIME
				</view>
				<view class="value">{{account.time_account.time_money}}</view>
			</view> -->
		</view>
		<view class="tabs-block">
			<view @click="changeTab(1)">
				<view class="tab" :class="{'active':type==1}">服务明细</view>
				<view :class="{'tab-line':type==1}"></view>
			</view>
			<view @click="changeTab(2)">
				<view class="tab" :class="{'active':type==2}">兑换明细</view>
				<view :class="{'tab-line':type==2}"></view>
			</view>
		</view>
		<!-- <view class="search-time" @click="chooseTime">
			{{searchTime?searchTime:'全部'}}
			<u-icon name="arrow-down" size="26" style="margin-left:6rpx;"></u-icon>
		</view> -->
		<u-picker v-model="showSearchTime" mode="time" :params="params" @confirm='changeTime'></u-picker>
		
		<view class="content-list" v-if="type==1">
			<view class="item" v-for="(item,index) in list">
				<view class="content-title flex-between">
					<text class="title text-ellipsis-1" v-if="item.trade_type.value==1 || item.trade_type.value==2">
						<!-- 2 => ‘转账给-‘, 1 => ‘转账来自-‘, 3 => ‘兑换’, 4 => ‘发布个人服务’,5 => ‘完成多人项目’,6 => ‘完成个人项目’ -->
						<text class="font-bold">{{item.project_title}}</text>
						<text class="name">{{item.show_name}}</text>
					</text>
					<text class="title text-ellipsis-1" v-else-if="item.trade_type.value==4">
						<text class="font-bold">发布个人服务-</text>
						<text class="name">{{item.project_title}}</text>
					</text>
					<text class="title text-ellipsis-1" v-else-if="item.trade_type.value==5">
						<text class="font-bold">完成多人项目-</text>
						<text class="name">{{item.project_title}}</text>
					</text>
					<text class="title text-ellipsis-1" v-else-if="item.trade_type.value==6">
						<text class="font-bold">完成个人项目-</text>
						<text class="name">{{item.project_title}}</text>
					</text>
					<text class="title text-ellipsis-1" v-else-if="item.trade_type.value==7">
						<text class="font-bold">CFP/TIME(转出)</text>
					</text>
					<text class="title text-ellipsis-1" v-else-if="item.trade_type.value==8">
						<text class="font-bold">TIME/CFP(转入)</text>
					</text>
					<view class="score">
						<!-- <text>{{item.server_type==1?'+':'-'}}</text> -->
						<!-- <image :src="'../../static/img/level/level-'+(item.level_power)+'.png'"></image> -->
						<!-- <text>{{item.time_account}}</text> -->
						<view class="time-account" :class="[item.server_type==2?'main-color-font':'title-text']">{{item.server_type==2?'+':'-'}}{{item.amount?item.amount:0}} {{tokenName}}</view>
					</view>
				</view>
				<view class="time-block flex-between">
					<view class="finish-time">{{item.create_time}}</view>
					<view class="time-account" v-if="item.trade_type.value==7||item.trade_type.value==8" :class="[item.server_type==1?'main-color-font':'title-text']">{{item.server_type==1?'+':'-'}}{{item.time_money?item.time_money:0}} TIME</view>
				</view>
			</view>
		</view>
		<view class="content-list" v-else>
			<view class="item" v-for="(item,index) in list">
				<view class="content-title flex-between">
					<text class="title text-ellipsis-1">
						<text class="font-bold">兑换商品：</text>
						<text class="name">{{item.product_name}}</text>
					</text>
					<text class="score">{{item.total_time?item.total_time:0}}{{tokenName}}</text>
				</view>
				<view class="time-block flex-between">
					<view class="finish-time">{{item.create_time}}</view>
					<view class="time-account">-{{item.total_price?item.total_price:0}}￥</view>
				</view>
			</view>
		</view>
		<view class="uni-loadmore">{{loadMoreText}}</view>
		
		<u-popup :closeable="true" v-model="popshow" mode="bottom" height="700rpx" border-radius="20">
		    <view class="pop-info">
		    	<view class="title">时间明细</view>
		    	<view class="time">{{account.time_account.time_account?account.time_account.time_account:0}}</view>
		    	<view class="time-unit">总时间(小时)</view>
				<view class="item flex-between" v-for="(item, index) in accountLog">
					<view class="left">
						<image :src="'../../static/img/level/level-'+(item.level_power)+'.png'"></image>
						<text>{{item.level_name}}</text>
					</view>
					<view class="right">
						<text class="font-bold mr-10">{{item.count}}</text>
						<text class="font-size-24 main-text">小时</text>
					</view>
				</view>
		    </view>
		</u-popup> ，
	</view>
</template>

<script>
    var _self = this;
	export default {
		data() {
			return {
                isRotate: false, //是否加载旋转
                show: false,
                mode: 'date',
                lat:'',
                lng:'',
				token: uni.getStorageSync('userToken'),
				userInfo: {},
				loadMoreText: "加载中...",
				showLoadMore: false,
				page: 1,
				total: 0,
				list: [],
				type: 1,
				account: {},
				popshow: false,
				accountLog: [],
				tokenName: uni.getStorageSync('tokenName'),
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showSearchTime: false,
				searchTime: ''
			};
		},
        components:{
        },
        onLoad() {
			
        },
        onShow() {
			_self = this;
			debugger
			this.getList();
			this.getInfo();
        },
		onReachBottom() {
			//监听上拉触底事件
			console.log('onReachBottom');
			this.showLoadMore = true;
			this.getList();
		},
        computed: {
            i18n () {
                return this.$t('message');
            }
        },
        methods: {
			chooseTime() {
				debugger
				_self.showSearchTime = true
			},
			changeTime(e) {
				_self.searchTime = e.year+'-'+e.month
				_self.page = 1;
				_self.getList();
			},
			changeTab(index) {
				_self.searchTime = ''
				_self.type = index;
				_self.page = 1;
				_self.getList();
			},
			getInfo() {
				_self.$uniRequest.post(_self.$httpurl.user_info, {
					token : _self.token,
				}).then(function (response) {
				    _self.account = response.data.data;
				}).catch(function (error) {
				});
			},
            getList() {
				if (_self.page == 1) {
					_self.list = [];
				}
				_self.sending()
			},
			sending() {
				if (_self.type == 1) {
					_self.$uniRequest.post(_self.$httpurl.get_time_log, {
						page: _self.page,
						token: _self.token,
						date_search: _self.searchTime,
						trade: '4,5,6'
					}).then(function (res) {
						if (res.data.data.total > 0) {
							_self.loadMoreText = "加载更多";
							_self.total = res.data.data.total;
							console.log(_self.total);
							if (res.data.data.data.length < res.data.data.per_page || res.data.data.total == 0) {
								_self.loadMoreText = "暂无更多";
							}
							_self.list = _self.list.concat(res.data.data.data);
							_self.page++;
						} else {
							_self.loadMoreText = "暂无更多";
						}
					}).catch(function (error) {
						console.log(error)
						uni.showToast({
							duration:2000,
							icon:'none',
							title:'加载失败'
						})
					});
				} else {
					_self.$uniRequest.post(_self.$httpurl.get_exchange_orders, {
						page: _self.page,
						token: _self.token
					}).then(function (res) {
						if (res.data.data.total > 0) {
							_self.loadMoreText = "加载更多";
							_self.total = res.data.data.total;
							console.log(_self.total);
							if (res.data.data.data.length < res.data.data.per_page || res.data.data.total == 0) {
								_self.loadMoreText = "暂无更多";
							}
							_self.list = _self.list.concat(res.data.data.data);
							_self.page++;
						} else {
							_self.loadMoreText = "暂无更多";
						}
					}).catch(function (error) {
						console.log(error)
						uni.showToast({
							duration:2000,
							icon:'none',
							title:'加载失败'
						})
					});
				}
			},
			copy(value) {
				if (value) {
					uni.setClipboardData({
					    //准备复制的数据
					    data: value,
					    success: function (res) {
					        uni.showToast({
					            title: '复制成功',
					        });
					    },
						fail(error) {
						}
					})
				}
			},
			getTimeAccountLog() {
				_self.popshow = true
				_self.$uniRequest.post(_self.$httpurl.get_timeaccount_log, {
					token: _self.token
				}).then(function (res) {
					if (res.data.data) {
						_self.accountLog = res.data.data
					}
				}).catch(function (error) {
					
				});
			},
			goCFPManage() {
				uni.navigateTo({
					url: '/pages/member/account/cfpManage'
				})
			},
			goFinancialList() {
				uni.navigateTo({
					url: '/pages/member/account/financialList'
				})
			},
			goTimeList() {
				uni.navigateTo({
					url: '/pages/member/account/timeList'
				})
			},
			goTimeTransfer() {
				uni.navigateTo({
					url: '/pages/member/account/timeTransfer'
				})
			},
			goTimeManage() {
				uni.navigateTo({
					url: '/pages/member/account/timeManage'
				})
			}
		}
	}

</script>

<style lang="scss">
	.time-page {
		// padding: 30rpx;
		.header-block {
			position: relative;
			color: #ffffff;
			background: #F64F47;
			padding: 20rpx 20rpx 60rpx;
			
			.account {
				display: flex;
				padding: 20rpx 30rpx;
				word-break: break-all;
				border-radius: 16rpx;
				background: linear-gradient(180deg, #DC6A65 0%, #BD1F19 100%);
				.balance {
					width: 50%;
					border-right: 2rpx solid rgba(255, 255, 255, 0.2);
					.name {
						font-size: 20rpx;
					}
				}
				.change {
					width: 50%;
					margin-left: 28rpx;
				}
			}
		}
		.account-address {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			background: rgba(0,0,0,0.1);
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			.name {
				color: #ffffff;
				width: 75%;
				word-break: break-all;
				font-size: 24rpx;
			}
			.btn-copy {
				border: 2rpx solid #CCCCCC;
				display: inline-block;
				border-radius: 20rpx;
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				text-align: center;
			}
		}
		.my-property {
			position: absolute;
			top: 290rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				padding: 20rpx;
			}
			image {
				width: 368rpx;
				height: 224rpx;
				margin-right: 10rpx;
			}
			.item {
				align-items: center;
				.header {
					font-size: 28rpx;
				}
				.value {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.tabs-block {
			position: absolute;
			top: 600rpx;
			width: 100%;
			background: #ffffff;
			font-weight: bold;
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;
			.tab {
				font-size: 30rpx;
			}
			.tab-line {
				width: 44rpx;
				height: 6rpx;
				background: $main-color;
				text-align: center;
				margin: 0 auto;
			}
			.active {
				color: #333333;
			}
		}
		.search-time {
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}
		.content-list {
			.item {
				padding: 10rpx 30rpx;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				box-shadow: 0 0 8px rgba(175, 175, 175, 0.5);
				.content-title {
					.name {
						color: #A5A5A5;
					}
					image {
						width: 32rpx;
						height: 32rpx;
						margin: -8rpx 10rpx 0;
					}
					.score {
						color: #666666;
					}
				}
				.time-block {
					color: #999999;
					margin-top: 10rpx;
					.time-account {
						text-align: right;
					}
				}
			}
		}
		.pop-info {
			text-align: center;
			margin: 48rpx 30rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
			.time {
				color: $main-color;
				font-weight: bold;
				font-size: 48rpx;
				margin: 30rpx 0 10rpx;
			}
			.time-unit {
				color: #666666;
				font-weight: bold;
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}
			.item {
				box-shadow: 0 0 8px rgba(175, 175, 175, 0.5);
				word-break: break-all;
				font-size: 28rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 8rpx;
				color: #333333;
				.left {
					width: 50%;
					text-align: left;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
				.right {
					width: 50%;
					text-align: right;
					.hour {
					}
					.hour-unit {
						
					}
				}
			}
		}
		
		.tab-manage {
			text-align: center;
			.tab {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
			image {
				width: 84rpx;
				height: 84rpx;
				margin: 0 auto;
			}
		}
	}
</style>
